import { ExtractPropTypes } from "vue"
import { validatorColorValue, validatorSizeValue } from '../../utils'


/** Props */
export const slideVerifyProps = {
  /** 滑动中间提示文字 */
  tipsText: {
    type: String,
    default: '拖动滑块验证'
  },
  /** 验证成功提示文字 */
  successTipsText: {
    type: String,
    default: '验证成功'
  },
  /** 滑块图标名称 */
  icon: {
    type: String,
    default: 'right-double'
  },
  /** 验证成功滑块图标名称 */
  successIcon: {
    type: String,
    default: 'success'
  },
  /** 宽度, 默认单位rpx */
  width: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 高度, 默认单位rpx */
  height: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 激活时背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  activeBgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体大小, 默认单位为rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 自定义样式, 会覆盖配置的宽高和字体信息 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 禁用滑动 */
  disabled: {
    type: Boolean,
    default: false
  },
}
export type SlideVerifyProps = ExtractPropTypes<typeof slideVerifyProps>

export const slideVerifyEmits = {
  success: () => true,
  fail: () => true
}
export type SlideVerifyEmits = typeof slideVerifyEmits